<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>幸运转盘</title>
	<link href="bootstrap.min.css" rel="stylesheet">
	<style>
		img{ width:95px;height:95px;}
		table{margin: 0 auto;margin-top: 20px;width:500px;}
		.tb1{width:500px;height:500px;}
		.tb2 td{border:1px solid green;text-align:center;}
		.tds{width:100px;height:100px;border:1px solid blue;text-align:center;padding: 5px !important;}
		.emptyTd{text-align:center;}
		.choose {background-color : blue;}
		
		button.dim{display:inline-block;color:#fff;text-decoration:none;text-transform:uppercase;text-align:center;padding-top:6px;position:relative;cursor:pointer;border-radius:5px;font-weight:600;margin-bottom:10px!important;}
		button.dim:active{top:3px}
		button.btn-warning.dim{box-shadow:inset 0 0 0 #f79d3c,0 5px 0 0 #f79d3c,0 10px 5px #999}
		button.btn-warning.dim:active{box-shadow:inset 0 0 0 #f79d3c,0 2px 0 0 #f79d3c,0 5px 3px #999}
		button.btn-danger.dim{box-shadow:inset 0 0 0 #ea394c,0 5px 0 0 #ea394c,0 10px 5px #999}
		button.btn-danger.dim:active{box-shadow:inset 0 0 0 #ea394c,0 2px 0 0 #ea394c,0 5px 3px #999}
		.btn-large-dim{width:90px;height:90px;font-size:35px;}
	</style>
</head>
<body>
	<div class="row">
		<div class="col-sm-12">
			<table class="tb1">
				<tr>
					<td class="tds" id="td1"><img class="apple" src="apple.jpg"></td>
					<td class="tds" id="td2"><img class="pear" src="pear.jpg"></td>
					<td class="tds" id="td3"><img class="prize" src="prize.jpg"></td>
					<td class="tds" id="td4"><img class="pear" src="pear.jpg"></td>
					<td class="tds" id="td5"><img class="apple" src="apple.jpg"></td>
				</tr>
				<tr>
					<td class="tds" id="td16"><img class="seven" src="seven.jpg"></td>
					<td class="emptyTd"></td>
					<td class="emptyTd"></td>
					<td class="emptyTd"></td>
					<td class="tds" id="td6"><img class="seven" src="seven.jpg"></td>
				</tr>
				<tr>
					<td class="tds" id="td15"><img class="apple" src="apple.jpg"></td>
					<td class="emptyTd"></td>
					<td class="emptyTd">幸运转盘</td>
					<td class="emptyTd"></td>
					<td class="tds" id="td7"><img class="apple" src="apple.jpg"></td>
				</tr>
				<tr>
					<td class="tds" id="td14"><img class="bird" src="bird.jpg"></td>
					<td class="emptyTd"></td>
					<td class="emptyTd"></td>
					<td class="emptyTd"></td>
					<td class="tds" id="td8"><img class="bird" src="bird.jpg"></td>
				</tr>
				<tr>	
					<td class="tds" id="td13"><img class="apple" src="apple.jpg"></td>
					<td class="tds" id="td12"><img class="pear" src="pear.jpg"></td>
					<td class="tds" id="td11"><img class="seven" src="seven.jpg"></td>
					<td class="tds" id="td10"><img class="pear" src="pear.jpg"></td>
					<td class="tds" id="td9"><img class="apple" src="apple.jpg"></td>
				</tr>
			</table>
		</div>
		<div class="col-sm-12">
			<table class="tb2">
				<tr>
					<td><img name="selecter" class="btn apple" src="apple.jpg"></td>
					<td><img name="selecter" class="btn pear" src="pear.jpg"></td>
					<td><img name="selecter" class="btn seven" src="seven.jpg"></td>
					<td><img name="selecter" class="btn bird" src="bird.jpg"></td>
					<td><img name="selecter" class="btn prize" src="prize.jpg"></td>
				</tr>
				<tr>
					<td class="board" id="apple">0</td>
					<td class="board" id="pear">0</td>
					<td class="board" id="seven">0</td>
					<td class="board" id="bird">0</td>
					<td class="board" id="prize">0</td>
				</tr>
			</table>
		</div>
		<div class="col-sm-12">
			<table class="tb3">
				<tr>
					<td class="tds"><button class="btn btn-danger dim btn-large-dim" onclick="guess('big')">大</button></td>
					<td class="tds"><button class="btn btn-warning dim btn-large-dim" onclick="guess('small')">小</button></td>
					<td class="tds" id="point">0</td>
					<td class="tds"><button class="btn btn-danger dim btn-large-dim" onclick="startRunning()">开始</button></td>
					<td class="tds"><button class="btn btn-warning dim btn-large-dim" onclick="insertPoint()">投币</button></td>
				</tr>
			</table>
		</div>
		<div class="col-sm-12 row" style="display:none;">
			<div class="col-sm-12">
				<button onclick="startRunning()">start</button>
				<button onclick="stopRunning()">stop</button>
			</div>
			<div class="col-sm-12">
				index:<input id="index" type="text"/>
				speed:<input id="speed" type="text"/>
				times:<input id="times" type="text"/>
				decTime:<input id="decTime" type="text"/>
				increasing:<input id="increasing" type="text"/>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="jquery-1.11.3.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		var max = 16;				/* 最大索引 */
		var min = 1;				/* 最小索引 */
		var maxSpeed = 30;			/* 最快速度 */
		var minSpeed = 600;			/* 最慢速度 */
		var decTime = 0;			/* 减速阀值 */
		var decline = 2;			/* 减速递减值 */
		var rollTimes = 3;			/* 初始以最快速度闪烁的圈数 */
		var oddsArr = [2,4,5,8,16];	/* 赔率 */
		
		var times = 0;				/* 当前闪烁次数 */
		var index = 1;				/* 当前索引 */
		var speed = 0;				/* 当前滚动速度 */
		var increasing = 10;		/* 减少的速度 */
		var tempIndex = 0;			/* 临时索引 */
		
		var runable = true;			/* 开始/停止 控制器 */
		var t = null;				/* 计时器 */
		var running = false;		/* 运行状态 */
		function run(i){
			clearTimeout(t);
			if(runable){
				$("#td"+i).addClass("choose");
				
				if(speed >= minSpeed){
					stopRunning();
				}else{
					setTimeout(function(){
						$("#td"+tempIndex).removeClass("choose");
					},speed);
					if(times >= decTime){
						increasing += decline;
						speed += increasing;
					}else{
						times ++;
					}
				}
				
				tempIndex = i;
				if(index == max){
					index = min;
				}else{
					index ++;
				}
				i = index;
				t = setTimeout(function(){run(i)},speed);
				
				Console();
			}
		}
		
		function startRunning(){
			var temp = 0;
			$(".board").each(function(){
				temp += parseInt($(this).text());
			});
			if(temp == 0){
				alert("请下注后再开始");
				return false;
			}
		
			running = true;
			$("button").attr("disabled","disabled");
			$(".choose").removeClass("choose");
			decTime = Math.round(Math.random() * max) + max * rollTimes;
			speed = maxSpeed;
			runable = true;
			run(index);
		}
		
		function stopRunning(){
			runable = false;
			settlement();
		
			running = false;
			$("button").removeAttr("disabled");
			times = 0;
			increasing = 10;
			$(".board").text("0");
		}
		function settlement(){
			var c = $("#td"+index+" img").attr("class");
			
			var g = parseInt($("#"+c).text());
			var odds = 0;
			switch(c){
				case "apple":
				odds = oddsArr[0];
				break;
				case "pear":
				odds = oddsArr[1];
				break;
				case "seven":
				odds = oddsArr[2];
				break;
				case "bird":
				odds = oddsArr[3];
				break;
				case "prize":
				odds = oddsArr[4];
				break;
				default:break;
			}
			var point = parseInt($("#point").text());
			point += g*odds ;
			$("#point").text(point);
		}
		
		function Console(){
			$("#speed").val(speed);
			$("#index").val(index);
			$("#times").val(times);
			$("#decTime").val(decTime);
			$("#increasing").val(increasing);
		}
		
		function insertPoint(){
			var point = parseInt($("#point").text());
			point += 10;
			$("#point").text(point);
		}
		
		function guess(str){
			var point = parseInt($("#point").text());
			if( point >= 1 ){
				var r = Math.round(Math.random());
				if( r == 0){
					/* 大 */
					if( str == "big"){
						$("#point").text(point*2);
					}else{
						$("#point").text(0);
					}
				}else{
					/* 小 */
					if( str == "small"){
						$("#point").text(point*2);
					}else{
						$("#point").text(0);
					}
				}
			}else{
				alert("剩余积分不足");
			}
		}
		
		var addAble = false;
		var addTimer = null;
		$("[name='selecter']").mousedown(function() {
			if(running) return;
			var cc = $(this).attr("class").split(" ")[1];
			
			var point = parseInt($("#point").text());
			if( point >= 1 ){
				$("#point").text(point - 1);
				
				var oldP = parseInt($("#"+cc).text()) + 1;
				$("#"+cc).text(oldP);
			}else{
				alert("剩余积分不足");
				return false;
			}
			
			addAble = true;
			addTimer = setTimeout(function() {
				addPoints(cc);
			}, 500);
		}).mouseup(function() {
			addAble = false;
			clearTimeout(addTimer);
		});
		
		var tempTimer = null;
		function addPoints(str){
			clearTimeout(tempTimer);
			if(addAble){
				var point = parseInt($("#point").text());
				if( point >= 1 ){
					$("#point").text(point - 1);
					
					var oldP = parseInt($("#"+str).text()) + 1;
					$("#"+str).text(oldP);
				}else{
					addAble = false;
				}
				tempTimer = setTimeout(function(){addPoints(str)},100);
			}
		}
	</script>
</body>
</html>